<template>
	<div class="list" ref = "wrapper">
	  <div>
		<div class="area">
			<div class="title border-topbottom">当前城市</div>
			<div class="button-list">
				<div class="button-warper">
					<div class="button">{{this.$store.state.city}}</div>
				</div>
			</div>
		</div>
		<div class="area">
			<div class="title border-topbottom">热门城市</div>
			<div class="button-list">
				<div class="button-warper" v-for="item of hot" :key="item.id" @click="handlerCity(item.name)">
					<div class="button" >{{item.name}}</div>
				</div>
			</div>
		</div>
		<div class="area" v-for="(item,key) of city" :key="key" :ref="key">
			<div class="title border-topbottom">{{key}}</div>
			<div class="item-list" v-for="list of item" @click="handlerCity(list.name)">
				<div class="item border-bottom">{{list.name}}</div>
			</div>			
		</div>
      </div>
	</div>
</template>

<script>
import BScroll from 'better-scroll'
export default {
  name: 'CityList',
  props:{
  	hot:Array,
  	city:Object,
  	letter:String
  },
  mounted(){
  	this.scroll = new BScroll(this.$refs.wrapper)
  },
  methods:{
  	handlerCity(city){
  		this.$store.dispatch('changeCity',city)
  		this.$router.push('/')
  	}
  },
  watch:{
  	letter(){
  		if(this.letter){
  			const element = this.$refs[this.letter][0]
  			this.scroll.scrollToElement(element)
  		}
  	}
  }
}

</script>

<style lang="stylus"  scoped >
	.border-topbottom
		&:before
			border-color:#ccc
		&:after
			border-color:#ccc
	.border-bottom
		&:before
			border-color:#ccc
	.list
		overflow:hidden
		position:absolute
		top:1.95rem
		left:0
		right:0
		bottom:0
	.title
		line-height:.4rem
		background:#eee
		padding-left:.2rem
		color:#666
		font-size:.26rem
	.button-list
		overflow:hidden
		padding: .1rem .6rem .1rem .1rem
		.button-warper
			float:left
			width:33.33%
			.button
				text-align:center
				margin:.1rem
				border:0.02rem solid #ccc
				padding:.1rem 0
				border-radius:0.06rem
	.item-list
		.item
			line-height:.65rem
			color:#666
			padding-left:.2rem
</style>
